sannongzixunwang_web/pages/newsDetail/[id].vue

<template>
    <!-- 页面头部 -->
    <HomePageHead></HomePageHead>
    <!-- 导航栏 -->
    <HomePageNavigation1></HomePageNavigation1>
    <!-- 列表页广告一 -->
    <HomeTopTen :imgurl="adList[0]" v-if="adList[0]"></HomeTopTen>
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
        <div class="inner">
            <span class="location">当前位置:</span>
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item>
                    <NuxtLink to="/">首页</NuxtLink>
                </el-breadcrumb-item>
                <el-breadcrumb-item >
                    <NuxtLink :to="{ path: `/newsList/${routLevelId}` }">
                        {{ routLevelTitle }}
                    </NuxtLink>
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{ routeNewsTtitle }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </div>
    <!-- 资讯列表 -->
    <div class="newsDetail">
        <div class="inner">
            <div class="innerLeft">
                <div class="LeftTop">
                    <h1>{{ newsDetail.title }}</h1>
                    <p>
                        来源: <span>{{ newsDetail.copyfrom }}</span>
                        作者: <span>{{ newsDetail.author }}</span>
                        发布时间: <span>{{ time }}</span>
                    </p>
                    <!-- <img :src="newsDetail.imgurl" v-if="newsDetail.imgurl&&newsDetail.level==2||newsDetail.level==3"> -->
                </div>
                <div class="leftBottom" v-html="newsDetail.content" v-if="newsDetail.content"></div>
                <!-- 免责声明: -->
                <div class="disclaimer" v-if="newsDetail.copyfrom!='本网'">
                    <p>原文链接：{{ newsDetail.fromurl }}</p>
                    <p>[免责声明]本文来源于网络转载，仅供学习交流使用，不构成商业目的。 版权归原作者所有，如涉及作品内容，版权和其他问题，请在30日与本网联系，我们将第一时间处理。</p>
                </div>
            </div>
            <div class="innerRight">
                <!-- 热点资讯1 -->
                <div class="hotList1">
                    <DetailHotNews></DetailHotNews>
                </div>
                <!-- 热点资讯2 -->
                <div class="hotList2">
                    <DetailHotNews2></DetailHotNews2>
                </div>
            </div>
        </div>
    </div>
    <!-- 页面底部 -->
    <HomeFoot1></HomeFoot1>
</template>

<script setup>
//1.页面依赖 start ---------------------------------------->
import { onMounted } from 'vue'
import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'

const nuxtApp = useNuxtApp();
const axios = nuxtApp.$axios;

//获得跳转过来的id
const route = useRoute();
const articleId = route.params.id; //获得该页面的id
//1.页面依赖 end ---------------------------------------->

//2.页面数据 start ---------------------------------------->
//2.1 资讯详情
const newsDetail = ref({})
const routeNewsTtitle = ref("");
//2.2 发布日期
const time = ref("");
//2.3 路径
const routLevelTitle = ref("");
const routLevelId = ref("");
//2.4获取详情
async function getPageData() {
    const mkdata =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
        method: 'GET',
        query: {
            'articleid': articleId
        },
    });
    //获取内容
    newsDetail.value = mkdata.data;
    //获取路径
    routLevelTitle.value = newsDetail.value.cat_name;
    routLevelId.value = newsDetail.value.category_id;
    //获取发布时间
    time.value = newsDetail.value.updated_at.split(' ')[0];
    //修正标题长度
    if (newsDetail.value.title.length >= 30) {
        routeNewsTtitle.value = newsDetail.value.title.substr(0, 30) + "...";
    } else {
        routeNewsTtitle.value = newsDetail.value.title
    }
}
getPageData();

//2.5 获得广告
//广告列表
let adList = ref([]);
async function getAdData(){
    const adData = await requestDataPromise('/web/getWebsiteAdvertisement',{method:'GET',query:{'ad_tag':'DETAIL'}});
    adList.value = adData.data;
}
getAdData();
//2.页面数据 end ---------------------------------------->

//3.设置seo信息 start---------------------------------------->
//3.1 设置seo信息
const setData =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
    method: 'GET',
    query: {
        'articleid': articleId
    },
});

let seoTitle = setData.data.title + "_三农资讯网_全国政务信息一体化应用平台";
let seoDescription = setData.data.introduce + "_三农资讯网_全国政务信息一体化应用平台";
let seoKeywords = setData.data.keyword + "_三农资讯网_全国政务信息一体化应用平台";

useSeoMeta({
    title: seoTitle,
    meta: [
        { name: 'description', content: seoDescription },
        { name: 'keywords', content: seoKeywords }
    ]
});
//4.设置seo信息 end---------------------------------------->
</script>

<style lang="less" scoped>
@import url('@/assets/css/detail.less');
</style>